<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Off the Record</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
	function checkForm() {
		var f = document.updateForm;
		if(f.userEmail.value==""){
			alert("메일을 입력하세요!");
			return f.userEmail.focus();
		}
		if(f.userPassword.value==""){
			alert("비밀번호를 입력하세요!");
			return f.userPassword.focus();
		}
		if(f.userPassword2.value==""){
			alert("비밀번호 확인을 입력하세요!");
			return f.userPassword2.focus();
		}
		if(f.userPassword.value != f.userPassword2.value){
			alert("비밀번호 확인을 다시 입력하세요!");
			return f.userPassword2.value="";
		}
		
		var i = confirm("수정하시겠습니까?");
		if(i)
			f.submit();
	}
	//비밀번호 일치하는지 알아보는 jQuery
	$(document).ready(function(){
		$('#password_check').keyup(function(){
			var f = document.updateForm;
			if(f.userPassword.value != f.userPassword2.value){
				$('#password_check_span').html("<font color=red> 비밀번호가 다릅니다!</font>");
			}else{
				$('#password_check_span').html("<font color=green> 비밀번호가 같습니다!</font>");
			}
		});
	});
</script>
<body>
	<c:import url="../common/top.jsp"></c:import>
<div class="container" style="margin: 60px;"></div>

<div class="container">
<div class="row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>

<!--  -->
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
	<c:import url="../common/user_menu.jsp" />
</div>
	
	<div class="right col-xs-9 col-sm-9 col-md-9 col-lg-9">
		<!-- 탭 -->
		<div class="bs-example bs-example-tabs" role="tabpanel">
    		<ul id="myTab" class="nav nav-tabs" role="tablist">
      			<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li>
      		</ul>
      		
    	<div id="myTabContent" class="tab-content">
	   		<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
	   			
	   			<div class="user-update col-lg-12" style="padding: 10px;">
		        	<form class="form" action="/OffTheRecord/updateUser.action" method="post" id="updateForm" name="updateForm">
						<div class="form-group">
							<label for="user_id">아이디</label>
							<input type="text" class="form-control" id="user_id" name="userId" value="${sessionScope.userVo.userId }" readonly="readonly">
						</div>
						
						<div class="form-group">
							<label for="email">이메일</label>
							<input type="email" class="form-control" id="email" name="userEmail" value="${sessionScope.userVo.userEmail }">
						</div>
						
						<div class="form-group">
							<label for="password">비밀번호</label>
							<input type="password" class="form-control" id="password" name="userPassword">
						</div>
						
						<div class="form-group">
							<label for="password">비밀번호 수정</label>
							<input type="password" class="form-control" id="password_check" name="userPassword2">
							<span id="password_check_span"></span>
						</div>
						
						<input class="btn btn-default" type="button" value="수정" onclick="checkForm()"><p>
					</form>
				</div>
				
	        </div>
    	</div>
	</div><!-- End 탭 -->
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
	</div>
</div><!--  -->

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
</div><!-- row -->
</div><!-- container -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>   
</body>
</html>